<template>
  <div class="addUser">
    <el-dialog title="添加用户" :visible.sync="open" :before-close="handleClose">
      <el-form ref="elForm" :model="form" :rules="rules">
        <el-form-item label="用户账号" :label-width="formLabelWidth"  prop="username">
          <el-input v-model="form.username" autocomplete="off" :disabled="!insert"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realname">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model.number="form.age" autocomplete="off" type='number'></el-input>
        </el-form-item>
        <el-form-item label="证件编号" :label-width="formLabelWidth" prop="idType">
          <el-input v-model="form.idType" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "adduser",
    props: {
      open: {
        type: Boolean,
        default: false
      },
      formLabelWidth: {
        type: String,
        default: '120px'
      },
     /* form:{
        type:Object,
        default :function(){
          return {
          }
        }
      },*/
      insert:{
        type:Boolean,
        default:true
      }

    },
    data() {
      let checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'))
        }


        if (!Number.isInteger(value)) {
          callback(new Error('请输入数值类型'))
        } else if (value.toString().length > 3) {
          callback(new Error('请输入3位以下数值类型'))
        } else {
          callback()
        }

      }
      return {
        form: {
          username: '',
          password: '',
          idType: '',
          realname: '',
          age: '',
          id:''
        },

        rules: {
          username: [
            {required:this.insert, message: '请输入账户名', trigger: 'blur'},
            {min: 3, max: 18, message: '长度在 3 到 18个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur'}
          ],
          realname: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'},
            {min: 2, max: 18, message: '长度在 2 到 18 个字符', trigger: 'blur'}
          ],
          age: [
            {required: true, message: '请输入年龄', trigger: 'blur'},
            {validator: checkAge, trigger: 'blur'},

          ],
          idType: [
            {required: true, message: '请输入证件编号', trigger: 'blur'},
            {min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur'}

          ]

        }
      }
    },

    methods: {
      formReset() {
        this.form = {
          username: '',
          password: '',
          idType: '',
          realname: '',
          age: '',
          id: ''
        }
      },
      setForm(form){
        this.form = form
      },
      resetFields(){
       // this.formReset()
        this.$refs['elForm'].resetFields();
      },
      handleClose() {
        this.$emit("cancel")
      },

      cancel() {
        this.$emit("cancel")
      },
      submit() {
       let _this= this

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            console.log("insert : "+this.insert)
            if (this.insert){ // 新增操作
              this.axios.post('/api/insertUser',_this.form).then(response=>{
                console.log(response);
                if(response.data.code==1){
                  // 操作成功,注册事件
                  this.cancel()
                  this.$emit("success",response.data.msg)
                }
              });
            }else{ // 更新操作

              this.axios.post('/api/updateUserById',_this.form).then(response=>{
                console.log(response);
                if(response.data.code==1){
                  // 操作成功,注册事件
                  this.cancel()
                  this.$emit("success",response.data.msg)
                }
              });

            }

          } else {
            console.log('error submit!!');
            return false;
          }
        })



      }

    }
  }
</script>

<style>
  .addUser {
    width: 100%;
  }

</style>
